<template>
	<view class="index  :style={over-flow:'hidden',height:changeHeight} ">
		<!-- 搜索组件 -->
		<ugo-search @setHeight="setHeight"></ugo-search>
		<view class="swiper">
			<swiper>
				<swiper-item v-for="item in swiperList" :key="item.goods_id">
					<navigator url="'/packone/goods/goods?id='+item.goods_id">
						<image :src="item.image_src"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<view class="navs">
			<navigator 
				v-for="item in navs" 
				:key="item.name"
				:open-type="item.navigator_url ? 'switchTab' :'navigate'"
				:url="item.navigator_url ? '/pages/category/category' : '/packageone/list/list'"
				>
				<image :src="item.image_src" />
			</navigator>
		</view>
		
		
		<!-- 栏目楼层 -->
		<view class="floors">
			<!-- 1 -->
			<view class="floor" v-for="(item, i) in floors" :key="i">
				<!-- title -->
				<view class="ftitle">
					<image :src="item.floor_title.image_src" />
				</view>
				<!-- pics -->
				<view class="fitems">
					<navigator
						v-for="(prd,idx) in item.product_list"
						:key="idx"
						class="fitem"
						:url="'/packageone/list/list?query=' + prd.name"
					>
						<image :src="prd.image_src" />
					</navigator>
				</view>
			</view>
		</view>			
		<view v-if="isTop" @click="goTop" class="goTop icon-top"></view>
	</view>
</template>
<script>

	export default {
		data() {
			return {
					swiperList: [],
					navs: [],
					floors: [],
					isTop: false, // 是否显示回到顶部
					changeHeight:'auto'
			}
		},
		async onLoad() {
			this.getSwiper()
			this.getNavs()
			this.getFloors()
		},
		onPullDownRefresh() {
			console.log('用户下拉....')
			
			Promise.all([this.getSwiper(), this.getNavs(),this.getFloors()]).then(() => {
				// promise.all([])的数组中所有的promise都成功，就会执行
				// 发请求(3个请求)去取最新的数据
				
			}).catch(err => {
				console.log(err)
			}).finally(() => {
				// 手动调用结束下拉状态的api
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			setHeight(e){
				this.changeHeight=e
			},
			async getSwiper() {
				const {data} = await this.request({url: '/home/swiperdata'})

				this.swiperList = data
			},
			async getNavs() {
				const {data} = await this.request({url: '/home/catitems'})
				this.navs = data
			},
			async getFloors() {
				const {data} = await this.request({url: '/home/floordata'})
				this.floors = data
			},
			// 1. 监听滚动条的位置 =====> 是否显示 goTop
			onPageScroll({scrollTop}){
				// 如果滚动的距离 >= 整体高度的0.5, 就显示gotop
				const {windowHeight} = uni.getSystemInfoSync()
				// console.log(windowHeight, scrollTop)
				// if(scrollTop > 0.5 * windowHeight) {
				// 	console.log('可见')
				// } else {
				// 	console.log('不可见')
				// }
				this.isTop = scrollTop > 0.5 * windowHeight
			},
			
			// 2. 点击goTop，回到页面的顶部
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		.swiper{
			swiper, image {
				 width: 750rpx; 
				 height: 340rpx;
			} 
		}
		// 功能导航
		.navs {
			display: flex;
			padding: 30rpx;
			background: #fff;
			justify-content: space-around;
		
			navigator, image {
				display: block;
				width: 128rpx;
				height: 140rpx;
			}
		}
		
		.floors {
			.ftitle {
				padding-top: 30rpx;
				background: #f4f4f4;
			
				image {
					width: 750rpx;
					height: 60rpx;
				}
			}
			.fitems {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				.fitem {
					box-sizing: border-box;
					width: 250rpx;
					height: 200rpx;
					padding:5rpx;
					
					image {
						width: 240rpx;
						height:190rpx;
						// 750 / 3 = 250
					}
				}
			}
		}
		
		.goTop {
			position: fixed;
			bottom: 30rpx;
			/* #ifdef H5 */
			bottom: 65px;
			/* #endif */
			right: 30rpx;
		
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			font-size: 48rpx;
			color: #666;
			border-radius: 50%;
			background-color: red;
			// background-color: rgba(255, 255, 255, 0.8);
		}
	} 
</style>